<template>
  <div class="holding-box">
    <p>精选池持仓分析</p>
    <div class="chart">
      <div class="line_chart" id="chart" v-show="pieOptionData.length"></div>
      <div class="empty" v-show="!pieOptionData.length">
        <empty-pool minHeight="58vw" desc="暂无持仓个股"></empty-pool>
      </div>
    </div>
    <footer>
      <atom-button type="primary" block @click="closePopup">确定</atom-button>
    </footer>
  </div>
</template>

<script>
import { compare } from '@/utils';
import configDataOptions from '@/utils/dataOption';
import { reqPoolProfit } from '@/apis/pool.api';
import EmptyPool from '@/components/detail/EmptyPool.vue';

export default {
  components: {
    EmptyPool,
  },
  data() {
    return {
      pieOptionData: [],
    };
  },
  created() {
    this.getDealProfitData();
  },
  methods: {
    closePopup() {
      this.$emit('update:show', false);
    },
    // 获取收益数据并处理
    async getDealProfitData() {
      try {
        const res = await reqPoolProfit({
          gpcId: window.getParam('gpc_id'),
        });
        if (Number(res.code) === 0) {
          this.dealAllData(res.data);
        }
      } catch (error) {
        const errInfo = {
          name: '接口请求异常',
          message: `msg:${error?.message || 'network error'},url:${error?.config?.url || 'reqPoolProfit'}`,
          stack: window.getParam('gpc_id'),
        };
        _t.errorReport(errInfo);
      }
    },
    //处理收益、页面基本数据
    dealAllData(data) {
      if (data.length === 0) {
        return;
      }
      this.dealPieData(data.layout);
    },
    // 处理饼图数据
    dealPieData(layout) {
      //处理饼图数据  得到key
      const pieOptionName = Object.keys(layout);
      //得到value
      const pieOptionValue = Object.values(layout);
      const tempPieDataArr = [];
      pieOptionValue.forEach((item, index) => {
        tempPieDataArr.push({
          name: pieOptionName[index],
          value: item,
        });
      });
      // 取排好序的前6个
      const SIX = 6;
      let thirdData = [];
      if (tempPieDataArr.length > SIX) {
        thirdData = [...tempPieDataArr].sort(compare('value')).reverse().splice(0, SIX);
        const leftData = [...tempPieDataArr].sort(compare('value')).reverse().slice(SIX);
        // 后面的做统计
        let allValue = 0;
        if (thirdData.length === SIX && tempPieDataArr.length) {
          leftData.forEach(item => {
            allValue += item.value;
          });
          if (allValue !== 0) {
            // 归类为其他
            thirdData.push({
              name: '其他行业',
              value: allValue,
            });
          }
        }
      } else if (!tempPieDataArr.length) {
        thirdData = [];
      } else {
        thirdData = [...tempPieDataArr].sort(compare('value')).reverse();
      }
      if (thirdData.length > 0) {
        const pieOptionDataColor =
          window.getCssStyle() === 'black'
            ? ['#A42222 ', '#3265A6', '#B25913', '#3D3D95', '#B17216', '#9D1D42', '#5B91FC']
            : ['#F16F6F', '#7FB2F3', '#FFA660', '#8A8AE2', '#FEBF62', '#EA698F', '#5B91FC'];
        // 获取饼图右侧名字列表 并组装饼图最终数据
        const allName = [];
        thirdData.forEach((item, index) => {
          allName.push(`${item.name}`);
          this.pieOptionData.push({
            name: item.name,
            value: item.value,
            color: pieOptionDataColor[index],
          });
        });
        configDataOptions.drawPie(allName, this.pieOptionData, '精选池');
      } else {
        this.pieOptionData = [];
      }
    },
  },
};
</script>

<style scoped>
.holding-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

p {
  font-size: 18px;
  color: var(--text-1);
  text-align: center;
  line-height: 22px;
  font-weight: 500;
  margin: 20px 0;
}

.chart {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.line_chart {
  width: 7.02rem;
  height: 300px;
}

.empty {
  width: 100%;
}

footer {
  margin: 8px 16px;
}
</style>
